<?php
/**
 * motif/index.phtml
 */
?>
<?php
$title = 'Motif de départ';
$this->headTitle($title);
?>
<div class="content-head">
    <h3>
	<?php echo $title; ?>
	<img src='<?php echo $this->basePath() . '/img/rhx/refresh-16x16.png' ?>' title="Actualiser la liste" class='rhx-refresh'>
    </h3>
    <div class="toolbar">
	<div class="toggle add" title="Ajouter">
            <a href="#" style="display: block; width: 100%; height: 100%;" onclick="$('.add-toggle').toggle('slow');
		    return false;"></a>
        </div>
    </div>
</div>

<div class="content-body">
    <div class="add-toggle">
	<div class="list-container">
	    <table class="table table-striped list-table">
		<thead>
		    <tr>
			<td width="45%">Libellé</td>
                        <td width="45%">Commentaire</td>
			<td width="10%">&nbsp;</td>
		    </tr>
		</thead>
		<tbody>
		    <tr>
			<td>
			    <a href="#" id="libelleNew" data-type="text"></a>
			</td>
                        <td>
			    <a href="#" id="commentaireNew" data-type="text"></a>
			</td>
			<td>
			    <button class="btn btn-success ajouter">Ajouter</button>
			</td>
		    </tr>
		</tbody>
	    </table>
	</div>
	<form id="formNew" action="#" method="post">
	    <input type="hidden" id="id" name="id" value="0">
	    <input type="hidden" id="data-libelle" name="libelle" value="">
            <input type="hidden" id="data-commentaire" name="email" value="">
	</form>
    </div>

    <!-- CONTENU AJAX -->
    <div id='content-data'>
	<!-- AJAX LOADING -->
    </div>
</div>

<script type="text/javascript">
// Démarrage
		$(function() {
		    // Editable
		    $('#libelleNew').editable({
			title: "Nouveau Libellé",
			validate: function(value) {
			    value = $.trim(value);
			    $('#data-libelle').val(value);
			}
		    });
		    $('#comentaireNew').editable({
			title: "Nouveau commentaire",
			validate: function(value) {
			    value = $.trim(value);
			    $('#data-email').val(value);
			}
		    });
		    // Ajouter
		    $('.ajouter').click(function(e) {
			e.preventDefault();
			libelle = $('#data-libelle').val();
			commentaire = $('#data-commentaire').val();

			// Enregistrement dans la base de données
			ajax = $.ajax({
			    type: 'post',
			    url: '<?php echo $this->url('RHX/default', array('controller'	 => 'motif', 'action'	 => 'add')); ?>',
			    data: $('#formNew').serialize()
			});
			ajax.done(function(data) {
			    if (!data.done) {
				alert("Erreur d'ajout!");
			    }
			    // Rafraichir la liste
			    refresh();
			    $('#libelleNew, #commentaireNew').text('Vide');
			    $('#data-libelle, #data-commentaire').val('');
			    $('.add-toggle').hide('normal');
			});
			ajax.fail(function() {
			    alert("Une erreur est survenue lors de l'insertion d'un nouveau motif");
			});
		    });
		    // Update
		    $('.rhx-refresh').click(function(e) {
			e.preventDefault();
			refresh();
		    });

		    // Mise à jour de l'interface
		    refresh();
		});

		// Function de rafraichissement
		function refresh() {
		    ajax = $.ajax({
			type: 'post',
			url: '<?php echo $this->url('RHX/default', array('controller'	 => 'motif', 'action'	 => 'loadIndex')); ?>'
		    });
		    ajax.done(function(data) {
			$('#content-data').hide().html(data).fadeIn('normal');
		    });
		    ajax.fail(function() {
			$('#content-data').hide().html("<div class='rh-error'>Contenu Impossible à charger</div>").fadeIn('normal');
		    });

		    return false;
		}
</script>

